<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/par.png" alt> 员工管理
    </div>
    <div class="clear"></div>
    <div class="table">
      <div class="thead">员工列表
        <div class="addpar" @click="editStaffMans()">
          <img class="add" src="../../images/main/add.png" alt> 增加员工
        </div>
      </div>
      <div class="sthead">
        <div class="staffname">员工姓名</div>
        <div class="staffacc">员工账号</div>
        <div class="phone">员工手机号</div>
        <div class="rolename">角色名称</div>
        <div class="creator">创建时间</div>
        <div class="ctrl lastlist">操作</div>
      </div>
      <div class="tlists">
        <div class="tlist" v-for="(item,index) in staffList" :key="index">
          <div class="staffname">{{item.name}}</div>
          <div class="staffacc">{{item.user_account}}</div>
          <div class="phone">{{item.phone}}</div>
          <div class="rolename">{{item.role_name}}</div>
          <div class="creator">
            <div class="day">{{setDate(item.time)}}</div>
            <div class="time">{{setTime(item.time)}}</div>
          </div>
          <div class="ctrl lastlist">
            <ul>
              <li @click="permissionConfiged(item.id)">权限配置</li>
              <li @click="editStaffMans(item.id)">编辑</li>
              <li @click="delStaffMans(item.id)">删除</li>
              <li @click="rePass(item.id)">重置密码</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs' // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      staffList: [],
      data:{
        page:1,
        limit:10
      }
    };
  },
  methods: {
    /**
     * 设置密码
     */
    rePass: function (id) {
      this.$router.push({
        path:'/main/setPass',
        query: {
          p: this.encodeJson({
            mansId: id
          })
        }
      })
    },
    /**
     * 删除员工
     */
    delStaffMans:function (id) {
      let that = this
      if(confirm('是否删除？')) {
        axios({
        method: "post",
        url: `/sysEmployee/delEmployee`,
        data: qs.stringify({id:id})
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.getMansList()
        } else {
          this.$alert(res.data.msg); 
        }
      });
      }
      
    },
    /**
     * 编辑员工
     */
    editStaffMans: function(id) {
      let params = {};
      if(id) {
        params.mansEdit = true
        params.mansId = id
      } else {
        params.mansEdit = false
        params.mansId = ''
      }
      this.$router.push({
        path: "/main/addMan",
        query: {
          p: this.decodeJson( params )
        }
      });
    },
    /**
     * 获取员工列表
     */
    getMansList: function () {
      let that = this
      axios({
        method: "post",
        url: `/sysEmployee/selectEmployeeList`,
        data: qs.stringify(that.data)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.staffList = res.data.data
        } else {
          this.$alert(res.data.msg); 
        }
      });
    },
    accParMan: function() {
      this.$router.push({
        path: "main/accParMan"
      });
    },
    // 权限配置
    permissionConfiged: function (id) {
      this.$router.push({
        path: '/main/permissionConfig',
        query: {
          p: this.encodeJson({
            mansId: id
          })
        }
      })
    },
        /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth()+1 < 10 ? "0" + times.getMonth()+1 : times.getMonth()+1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted () {
    this.getMansList()
  }
};
</script>
<style scoped>
.wrap {
  padding: 68px 136px;
  width: 100%;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.screen {
  width: 1490px;
  height: 60px;
  background: #f6f6f6;
  margin-left: 38px;
  margin-top: 24px;
  line-height: 60px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
}
.screen img {
  float: left;
  width: 27px;
  height: 27px;
  margin-left: 10px;
  margin-top: 16px;
  margin-right: 18px;
}
.sel {
  margin-top: 27px;
  padding-left: 38px;
  height: 40px;
  line-height: 40px;
}
.sel .txt {
  float: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  font-weight: bold;
  width: 73px;
}
.sel input {
  float: left;
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
}
.btn {
  float: left;
  color: #fff;
  background: #085dab;
  border: 1px solid #085dab;
  width: 140px;
  height: 38px;
  text-align: center;
  margin-left: 37px;
}
.table {
  width: 1490px;
  margin-top: 43px;
  margin-left: 38px;
}
.table .sthead {
  border-bottom: 1px solid #dddddd;
  height: 67px;
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  line-height: 67px;
  font-weight: bold;
  background: #e0eefe;
}
.staffname {
  width: 200px;
}
.sthead > div {
  float: left;
  border-left: 1px solid #ddd;
  text-align: center;
  box-sizing: border-box;
}
.staffacc {
  width: 246px;
}
.phone {
  width: 278px;
}
.rolename {
  width: 254px;
}
.creator {
  width: 150px;
}
.creator {
  width: 270px;
}
.tlist .creator {
  line-height: 25px;
  padding-top: 43px;
  height: 142px;
}
.day,
.time {
  height: 25px;
  line-height: 25px;
}
.state {
  width: 142px;
}
.table .thead {
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #000000;
  height: 69px;
  line-height: 69px;
  padding-left: 15px;
  background: #e0eefe;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  font-weight: bold;
}
.addpar {
  background: #f6f6f6;
  border: 1px solid #085dab;
  border-radius: 2px;
  width: 107px;
  height: 33px;
  float: right;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 33px;
  margin-top: 17px;
  margin-right: 20px;
  color: #085dab;
  cursor: pointer;
}
.add {
  width: 18px;
  height: 18px;
  float: left;
  margin: 8px;
}
/* .table div {
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #4a4a4a;
            border: 1px solid #dddddd;
            height: 142px;
            text-align: center;
        } */
.ctrl {
  width: 242px;
}
.tlist {
  height: 142px;
  line-height: 142px;
      border-bottom: 1px solid #ddd;
}
.lastlist {
  border-right: 1px solid #ddd;
}
.tlist > div {
  float: left;
  text-align: center;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
  height: 142px;
}
.tlist:last-of-type {
  border-bottom: 1px solid #ddd;
}
.ctrl ul {
  text-align: center;
  width: 179px;
  padding: 18px 19px 20px 31px;
  height: 104px;
}
.ctrl ul li {
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  margin-top: 3px;
  color: #085dab;
  font-weight: bold;
  cursor: pointer;
}
.ctrl .firli {
  margin-top: 0px;
}
.clear {
  clear: both;
}
</style>
